<template>
  <div style="width:100%;height: 100%;background-color: #fff;">
    <div id="echart-bar"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
var charts = null
export default {
  data() {

  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      charts = echarts.init(document.getElementById("echart-bar"))

      let option = {
        color: ['#faac38', '#48b876', '#636398', '#396892', '#a7ceeb', '#f3676f'],
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          show: false,
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          axisLabel: {
            fontSize: 14,
            color: '#000'
          },
          axisTick: {
            show: true,
            inside: true
          },
          axisLine: {
            show: true
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'category',
          data: ['ASN', 'IPv6', 'IPv4', 'GDP', '人口'],
          axisLabel: {
            fontSize: 14,
            color: '#000'
          },
          axisTick: {
            show: false,
          }
        },
        series: [
          {
            name: '非洲',
            type: 'bar',
            stack: 'total',
            label: {
              show: false
            },
            emphasis: {
              focus: 'series'
            },
            itemStyle: {
              borderColor: '#000',
              borderWidth: 0.2
            },
            data: [2, 3, 3, 3, 17]
          },
          {
            name: '亚洲',
            type: 'bar',
            stack: 'total',
            label: {
              show: false
            },
            emphasis: {
              focus: 'series'
            },
            itemStyle: {
              borderColor: '#000',
              borderWidth: 0.2
            },
            data: [18, 27, 24, 36, 59]
          },
          {
            name: '欧洲',
            type: 'bar',
            stack: 'total',
            label: {
              show: false,
            },
            emphasis: {
              focus: 'series'
            },
            itemStyle: {
              borderColor: '#000',
              borderWidth: 0.2
            },
            data: [34, 44, 20, 25, 10]
          },
          {
            name: '北美洲',
            type: 'bar',
            stack: 'total',
            label: {
              show: false
            },
            itemStyle: {
              borderColor: '#000',
              borderWidth: 0.2
            },
            emphasis: {
              focus: 'series'
            },
            data: [33, 18, 47, 29, 8]
          },
          {
            name: '大洋洲',
            type: 'bar',
            stack: 'total',
            label: {
              show: false
            },
            emphasis: {
              focus: 'series'
            },
            itemStyle: {
              borderColor: '#000',
              borderWidth: 0.2
            },
            data: [3, 4, 2, 2, 0]
          },
          {
            name: '南美洲',
            type: 'bar',
            stack: 'total',
            label: {
              show: false
            },
            emphasis: {
              focus: 'series'
            },
            itemStyle: {
              borderColor: '#000',
              borderWidth: 0.2
            },
            data: [10, 4, 4, 5, 6]
          }
        ]
      };

      charts.setOption(option, true);
      window.addEventListener('resize', () => {
        charts.resize()
      })
    }
  }
}
</script>
<style scoped>
#echart-bar {
  width: 90%;
  height: 500px;
  margin-left: 5%;
  background-color: #fff;
}
</style>